<template>
    <div class="good-container">
        <mt-swipe :auto="4000">
            <mt-swipe-item v-for="item in goods.url">
                <img :src="item"/>
            </mt-swipe-item>
        </mt-swipe>
        <div class="info">
            <h2>{{ goods.name }}</h2>
            <p class="price">
                <span class="now">¥{{ goods.new_price }}</span>
                <span class="old">¥{{ goods.old_price }}</span>
            </p>
        </div>
    </div>
</template>
<script>
import { Toast } from 'mint-ui'

export default {
  data () {
    return {
      id: this.$route.params.id, // 从父组件拿过来的id
      goods: {}
    }
  },
  created () {
    this.getGoodsById()
  },
  methods: {
    getGoodsById () {
      this.$http.get('api/getGoods/' + this.id).then(result => {
        if (result.status === 200) {
          this.goods = result.data
        } else {
          Toast('获取商品信息失败')
        }
      })
    }
  }
}
</script>
<style scoped>
.mint-swipe{
height: 400px;
}
.good-container{
    padding: 3px;
}
.good-container img{
    width: 100%;
}
.info h2{
    font-size: 15px;
}
.info .price .now{
    font-size: 17px;
    font-weight: bold;
    color: red;
  }
  .info .price .old{
    font-size: 14px;
    text-decoration: line-through;
    margin-left: 20px;
  }
</style>
